<template>
  <el-dialog v-model="dialogVisible" width="500px" max-height="170px">
    <template #header>
      <span>修改密码</span>
    </template>
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules" class="form">
      <el-form-item prop="oldPassword" label="旧密码">
        <el-input v-model="form.oldPassword" type="password" placeholder="请输入原始密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="newPassword" label="新密码">
        <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword" label="确认密码">
        <el-input v-model="form.confirmPassword" type="password" placeholder="请输入确认密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="warning" @click="reset()">重置</el-button>
        <el-button type="primary" @click="dialogVisible = false">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElForm } from "element-plus";

type FormInstance = InstanceType<typeof ElForm>;
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};
const formRef = ref<FormInstance>();

const reset = () => {
  formRef.value.resetFields();
};

const form = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

const rules = reactive({
  oldPassword: [{ required: true, message: "请输入原始密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  confirmPassword: [{ required: true, message: "请输入确认密码", trigger: "blur" }]
});

defineExpose({ openDialog });
</script>
<style scoped lang="scss">
.items-center {
  display: flex;
  text-align: center;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.image {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.username {
  font-size: 14px;
  color: var(--el-header-text-color);
  margin-top: 10px;
}
.form {
  margin-top: 10px;
}
.el-dialog__body {
  padding: 10px 20px;
}
.el-dialog .el-dialog__header {
  padding: 5px 10px;
}
</style>
